<template>
  <div>
    <ul>
      <!-- <transition-group> -->
      <!-- <template v-if="data"> -->
      <li
        class="wmy-elasticity"
        @click="handleClick(item)"
        v-for="item in data"
        :key="item.id"
      >
        <!-- :key="item.id" -->
        <h3>{{ item.title }}</h3>

        <p>{{ item.value || "暂无介绍" }}</p>
      </li>
      <!-- </template> -->
      <!-- </transition-group> -->
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {};
  },

  methods: {
    handleClick(item) {
      this.$emit("handleClick", item);
    },
  },
};
</script>

<style lang='scss' scoped>
ul {
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  li {
    overflow: hidden;
    opacity: 0;
    color: white;
    min-width: 100px;
    max-width: 200px;
    height: 90px;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 50%);
    padding: 10px;
    background: rgba(61, 170, 230, 1);
    animation: show 2s;
    animation-fill-mode: forwards; //停止状态
    h3 {
      font-size: 16px;
    }
    p {
      margin-top: 5px;
    }
  }
}
@keyframes show {
  from {
    // height: 0;
    // width: 10px;
    opacity: 0.5;
    background: rgba(61, 170, 230, 1);
  }
  to {
    background: rgba(61, 170, 230, 1);
    min-width: 100px;
    opacity: 1;
  }
}

/* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
/* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
.v-enter,
.v-leave-to {
  opacity: 0.5;
  transform: translateX(-10px);
}

/* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
</style>